{% extends 'core/base.html' %}

{% block title %}
  Chat
{% endblock %}

{% block content %}
  <div class="w-1/2 my-6 mx-auto p-6 bg-gray-100 border border-gray-300 rounded-xl">
    {% for message in chat.chat_messages.all %}
      <div class="p-2">
        {# prettier-ignore #}
        <div class="p-4 flex {% if message.created_by == request.user %}bg-green-200{% else %}bg-white{% endif %} rounded-xl border border-gray-300">
          <div>
            <p class="mb-2">
              <strong>{{ message.created_by.username }}</strong> @ {{ message.created_at }}
            </p>
            <p>{{ message.message }}</p>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="w-1/2 my-6 mx-auto p-6 bg-gray-100 border border-gray-300 rounded-xl">
    <form method="post" action="." class="mt-6">
      {% csrf_token %}

      {{ form.message }}

      <button class="px-3 py-2 text-lg font-semibold bg-green-700 text-white rounded-xl hover:bg-gray-500">Отправить</button>
    </form>
  </div>
{% endblock %}
